<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery.twStylesheet</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jQuery.twStylesheet.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			var applyCSS = function() {
				var css = $("#css_code").val();
				$.twStylesheet(css);
			};

			var resetCSS = function() {
				$.twStylesheet.remove();
			};

			$("#css_apply").click(applyCSS);
			$("#css_reset").click(resetCSS);

			// initialize
			$("#css_code").val(
				"html { background-color: #EEE; }\n" +
				"body { color: #FFF; background-color: #000; }\n" +
				"h1, h2 { font-variant: small-caps; }\n" +
				"ul { list-style-type: square; }\n" +
				"code { padding: 1px 2px; background-color: #EEE; }\n" +
				"#css_editor, #css_editor legend { background-color: #888; }\n"
			);
		});
	</script>
</head>

<body>
	<h1>jQuery.twStylesheet</h1>
	<p>
		This <a href="http://jquery.com">jQuery</a> plugin allows the application
		of CSS rule sets to the document.
	</p>
	<p>
		In contrast to jQuery's <a href="http://docs.jquery.com/CSS">CSS methods</a>,
		it applies styles to the document rather than to individual elements (just
		like defining a static style sheet in the document head).
	</p>
	<p>
		The code is based on <a href="http://tiddlywiki.com">TiddlyWiki</a>'s dynamic
		style-sheet capabilities, where it is used to allow users to customize their
		documents on the fly.
	</p>

	<h2>Source</h2>
	<p>
		The source code is currently hosted in TiddlyWiki's
		<a href="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jQuery.twStylesheet.js">Subversion repository</a>.
	</p>
	<p>
		<a href="http://groups.google.com/group/TiddlyWikiDev/">Feedback</a> is welcome.
	</p>

	<h2>API Summary</h2>
	<ul>
		<li>
			<p><code>$.twStylesheet(css[, options])</code>: adds or replaces a style sheet</p>
			<p>
				<code>css</code> is a string containing the CSS rule sets, while
				<code>options.id</code> is an optional name identifying the style sheet, allowing
				co-existence of multiple style sheets
			</p>
		</li>
		<li>
			<p>
				<code>$.twStylesheet.remove([options])</code>: delete an existing style sheet
			</p>
			<p>
				The <code>options</code> argument is identical to <code>$.twStylesheet</code>'s.
			</p>
		</li>
	</ul>
	<p>(full documentation in the code comments)</p>

	<h2>Demo</h2>
	This will apply the CSS rule sets below to the entire document.
	<fieldset id="css_editor" class="editor">
		<legend>CSS</legend>
		<textarea id="css_code" rows="10" cols="70"></textarea>
		<input id="css_apply" type="button" value="Apply">
		<input id="css_reset" type="button" value="Reset">
	</fieldset>
</body>

</html>
